<script setup>
import { ref , onMounted } from 'vue'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { easeOut } from "ol/easing.js";
const map = ref()

const adjustMethod = ()=>{
  const view = map.value.getView()
  view.adjustCenter([-10,3]);// 将相对坐标添加到视图的中心
  view.adjustResolution(3);//将视图分辨率乘以一个比率
  view.adjustRotation(Math.PI/2,[130,25])//向视图旋转添加一个值
  view.adjustZoom(3,[100,25])//将值添加到视图缩放级别
}

const animateMethod = ()=>{
  const view = map.value.getView();
  view.animate({
    zoom: 10,
    rotation: Math.PI/2,
    duration: 3000
    },
    {
      center: [116.36564254760744, 39.90486412650293],
      easing: easeOut,
      duration: 10000
    }
  )
  setTimeout(()=>{
    //取消动画
    view.cancelAnimations();
  },3000)
}

const otherMethod = ()=>{
  let view = map.value.getView();
  let extent = [106.36564254760744, 30.90486412650293, 116.36564254760744, 39.90486412650293]
  // 跳转到范围内
  view.fit(extent, {//根据给定的地图大小和边界拟合给定的几何图形或范围
    constrainResolution: false,
    earest:true,
    duration:3000,
    callback:()=>{console.log("aaa")}
  })
}

onMounted(() => {
  map.value = new Map({
    target:'map',
    layers:[
      new TileLayer({
        source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
      })
    ],
    view: new View({
      center: [113.24981689453125, 23.126468438108688], //视图中心位置
      projection: "EPSG:4326", //指定投影,84参考系投影
      zoom: 12,  //缩放到的级别
      constrainRotation:4,//true/false没有约束，4将旋转限制为 0、90、180 和 270 度
      enableRotation:true,
      // extent:[-180.0, 0.0, 180.0, 90.0], // [左下角经度，左下角纬度，右上角经度，右上角纬度]
      constrainOnlyCenter	:false, // 如果为 true，则范围约束将仅适用于视图中心而不是整个范围
      smoothExtentConstraint	:true, // 如果为true，范围约束将被平滑地应用，即允许视图稍微超出给定的extent
      // maxResolution:256, // 如果未指定，则以投影的有效范围适合 256x256 像素图块的方式计算
      // minResolution:256, // 如果未指定，则以投影的有效范围适合 256x256 像素图块的方式计算
      maxZoom:15,//用于确定分辨率约束的最大缩放级别
      minZoom:0,//用于确定分辨率约束的最小缩放级别
      multiWorld:false,//如果false视图受到约束，因此只有一个世界可见，并且您无法平移边缘。如果true地图可能以低缩放级别显示多个世界
      constrainResolution:false,//如果为 true，则视图将始终在交互后以最接近的缩放级别进行动画处理；false 表示允许中间缩放级别。
      smoothResolutionConstraint:true,//如果为 true，则视图将始终在交互后以最接近的缩放级别进行动画处理；false 表示允许中间缩放级别。
      showFullExtent:true,//允许缩小视图以显示完整的配置范围
      resolution:"",//视图的初始分辨率。单位是projection每像素的单位（例如每像素米
      // resolutions:[50,40,30,20,10,5,2],//指定缩放级别的分辨率,数组中的索引对应于缩放级别，因此分辨率值必须按降序排列。
      // rotation:Math.PI/1,//以弧度为单位的视图初始旋转（顺时针旋转，0 表示北）
      // zoomFactor:2,//用于计算相应分辨率的缩放因子
      // padding:[350,150,150,150],//填充（以 css 像素为单位）顺序是上、右、下、左,如果地图视口沿其边缘部分被其他内容（覆盖）覆盖，则此设置允许将视口的中心从该内容移开
    })
  })

  setTimeout(()=>{
    // adjustMethod();
    // animateMethod();
    otherMethod();
  },5000)
})
</script>

<template>
  <div id="map">

  </div>
</template>

<style scoped>
#map{
  width: 100%;
  height: 100%;
}
</style>